<template>
  <div class="root">
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            v-model="query.keyword"
            placeholder="请输入关键字查询"
            @click="search"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 30px;">
            <el-button type="danger" @click="BatchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24">
      <el-table
        v-loading="listLoading"
        :data="pageInfo.rows"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> 
        </el-table-column>
        <el-table-column prop="id" width="110" label="id">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="200">
        </el-table-column>
        <el-table-column prop="logo" label="logo" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.logo" style="width:50px;height:50px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="tel" label="联系电话" width="140"> 
        </el-table-column>
        <el-table-column prop="registerTime" label="注册时间" width="180"> 
        </el-table-column>
        <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true" > 
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.state == 3">已激活</el-tag>
            <el-tag type="info" v-if="scope.row.state == 1">待审核</el-tag>
            <el-tag type="warning" v-if="scope.row.state == 2">待激活</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 4">驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="update(scope.row)" >编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteById(scope.row.id)"/>
            <el-button type="danger" size="small" @click="aduit(scope.row)"  >手动审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10]"
        :page-size="query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </el-col>
    <el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
			<el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
				<el-form-item label="名称" prop="name">
					<el-input v-model="saveForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="tel">
					<el-input v-model="saveForm.tel" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="text" v-model="saveForm.address" readonly auto-complete="off" placeholder="请输入地址！"></el-input>
          <el-button size="small" type="primary" @click="dialogVisable = true">选择</el-button>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="saveFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
			</div>
		</el-dialog>
    <el-dialog title="选择地址" :visible.sync="dialogVisable" width="30%">
      <baidu-map :center="{lng: 116.403765, lat: 39.914850}" :zoom="11">
          <bm-view class="map"></bm-view>
          <bm-control :offset="{width: '10px', height: '10px'}">
              <!--:sugStyle="{zIndex: 2100} 让搜索提示上浮-->
              <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 2100}">
                  <div style="margin-bottom:10px">
                      <input id="searchInput" type="text" placeholder="请输入关键字" class="searchinput" />
                      <el-button type="success" @click="selectAdrressConfirm">确定</el-button>
                  </div>
              </bm-auto-complete>
          </bm-control>
          <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
      </baidu-map>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisable=false">取 消</el-button>
          <el-button type="primary" @click="dialogVisable=false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="人工审核" :visible.sync="dialogUpdateState" width="30%">
      <div style="margin:0 auto; width:90%; height:85px">
          <el-radio-group v-model="auditInfo.state">
            <el-radio :label="2">待激活</el-radio>
            <el-radio :label="4">驳回</el-radio>
          </el-radio-group><br><br>
           备注：
          <el-input type="textarea" v-model="auditInfo.note"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAduit()">取 消</el-button>
        <el-button type="primary" @click="saveAudit()" :loading="loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import shopApi from "@/api/org/shop";
export default {
  data() {
    return {
      //分页相关
      query: {
        page: 1,
        rows: 5,
        keyword: "",
      },
      keyword:"",
      pageInfo: {
        total: 0, //总记录数
        rows: [], //表数据
      },
      saveFormVisible: false,
      dialogVisable:false,
      dialogUpdateState:false,
      listLoading: true,
      saveLoading:false,
      ids:[], //选中的数据
      saveFormRules: {
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址信息', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ]
      },
      saveForm: {
        name: "",
        tel:"",
        state:"",
        address:""
      },
      auditInfo:{
        id:"",
        note:"",
        state:""
      },
      loading:false
    };
  },
  created() {},
  methods: {
    search() {
      this.getListPage();
    },
    //分页查询
    getListPage() {
      this.listLoading = true;
      shopApi.pageList(this.query).then((response) => {
        this.pageInfo = response.data.resultObj;
        setTimeout(() => {
          this.listLoading = false;
        }, 350);
      });
    },
    //全选回调函数
    handleSelectionChange(value) {
      this.ids = [];
      value.forEach((d) => {
        this.ids.push(d.id);
      });
    },
    //每页条数发生改变的回调函数
    handleSizeChange(pageTotals) {
      this.query.rows = pageTotals;
      this.getListPage();
    },
    //当前页发生改变的回调函数
    handleCurrentChange(curentPage) {
      this.query.page = curentPage;
      this.getListPage();
    },
    // add(){
    //   this.saveForm = {
    //     name: "",
    //     sn:""
    //   }
    //   this.saveFormVisible = true
    // },
    update(row){
      this.saveForm = row
      this.saveFormVisible = true
    },
    //保存修改
    saveSubmit(){
      this.listLoading = true
      shopApi.update(this.saveForm)
        .then(response => {
          this.$message.success("保存成功！");
          this.saveFormVisible = false
          this.listLoading = false
          this.getListPage()
        }).catch(response => {
          this.listLoading = false
        })
    },
    deleteById(id){
      this.$confirm('此操作将永久删除该角色信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        shopApi.deleteById(id)
        .then(response => {
          this.$message.success("删除成功！");
          this.getListPage()
        }).catch(response => {this.$message.error("删除失败！");})
      }).catch(() => {
        this.$message.info("已取消删除");         
      });
    },
    BatchDelete(){
      this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       if(this.ids.length < 1){
            this.$message.warning("请选要删除的角色！");
          }else{
            shopApi.batchDelete(this.ids)
              .then(response =>{
                this.$message.success("批量删除成功！");
                this.getListPage()
              }).catch(response => {
                this.$message.error("批量删除失败！");
              })
          }
      }).catch(() => {
        this.$message.info("已取消删除");         
      });
    },
    selectAdrressConfirm() {
      //获取值搜索框值,设置给地址
      var searchInputV = document.getElementById("searchInput").value;
      this.saveForm.address = searchInputV;
      //关闭对话框
      this.dialogVisable = false;
    },
    aduit(row){
      this.auditInfo.id= row.id
      this.auditInfo.state= row.state
      this.auditInfo.note = ''
      this.dialogUpdateState = true
    },
    cancelAduit(){
      this.dialogUpdateState=false
      this.getListPage()
    },
    saveAudit(){
      this.loading = true
      shopApi.aduit(this.auditInfo)
        .then(res => {
          this.loading = false
          this.$message.success("审核成功！");
          this.getListPage()
        })
      this.loading = false
      this.dialogUpdateState = false
    }
  },
  mounted() {
    this.getListPage();
  },
};
</script>

<style scoped>
.root {
  margin: 30px 16px;
}
.toolbar {
  background-color: rgb(244, 243, 244);
  padding-top: 10px;
  padding-left: 10px;
  height: 60px;
}
.map {
  width: 100%;
  height: 300px;
}
.searchinput {
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
}
</style>